<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>My first Three.js app</title>
    <style type="text/css">
        body {
            margin: 0;
        }
        canvas {
            width: 100%;
            height: 100%
        }
    </style>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="js/three.min.js" type="text/javascript"></script>
    <script src="js/Detector.js"></script>
    <script src="js/stats.min.js"></script>
    <script type="text/javascript">

        $(function() {
            var scene = new THREE.Scene();
            var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.z = 500;
            var renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);
            var stats = new Stats();
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.top = '0px';
            document.body.appendChild( stats.domElement );

            var geometry = new THREE.BoxGeometry(100, 50, 50);
            var matrix = new THREE.Matrix4();
            matrix.makeTranslation(100, 50, 100);
            var allGeometry = new THREE.BoxGeometry(100, 50, 50);
            allGeometry.merge(geometry, matrix);

            var materials = [];

            for (var i = 0; i != allGeometry.faces.length; i++) {
                var texture = createNumberedTexture(i);
                var material = new THREE.MeshBasicMaterial({map: texture });
                allGeometry.faces[i].materialIndex = i;
                materials.push(material);
            }

            var material = new THREE.MeshFaceMaterial(materials);

            box = new THREE.Mesh(allGeometry, material);

            scene.add(box);
            var render = function () {
                requestAnimationFrame(render);
                box.rotation.x += 0.01;
                box.rotation.y += 0.01;
                renderer.render(scene, camera);
                stats.update();
            };
            render();
        });

        function createNumberedTexture(number) {
            var canvas = document.createElement("canvas");
            canvas.width = 100;
            canvas.height = 100;
            var context = canvas.getContext("2d");
            context.font = 'Bold 20px Arial';
            context.fillStyle = '#FF0000';
            var numbersString = '';
            for (var i = 0; i != 10; i++)
                numbersString += number.toString();
            context.fillText(numbersString, 0, 0);
            context.fillText(numbersString, 0, 20);
            context.fillText(numbersString, 0, 40);
            context.fillText(numbersString, 0, 60);
            context.fillText(numbersString, 0, 80);
            context.fillText(numbersString, 0, 100);
            var texture = new THREE.Texture(canvas);
            texture.needsUpdate = true;
            return texture;
        }

    </script>
</head>
<body>
</body>
</html>